<style lang="less">
  @import './login.less';
</style>

<template>
  <div class="login">
    <Carousel
      v-model="value3"
      :autoplay="setting.autoplay"
      :autoplay-speed="setting.autoplaySpeed"
      :dots="setting.dots"
      :radius-dot="setting.radiusDot"
      :trigger="setting.trigger"
      :arrow="setting.arrow"
>
      <CarouselItem >
        <div class="demo-carousel">
          <img src="@/assets/images/admin_05.jpg" style="width:100%;height:100%;"  alt="轮播图">
        </div>
      </CarouselItem>
      <CarouselItem >
        <div class="demo-carousel">
          <img src="@/assets/images/admin_06.png" style="width:100%;height:100%;"  alt="轮播图">
        </div>
      </CarouselItem>
      <CarouselItem >
        <div class="demo-carousel">
          <img src="@/assets/images/admin_07.jpg" style="width:100%;height:100%;"  alt="轮播图">
        </div>
      </CarouselItem>
      <CarouselItem >
        <div class="demo-carousel">
          <img src="@/assets/images/admin_08.png" style="width:100%;height:100%;"  alt="轮播图">
        </div>
      </CarouselItem>
    </Carousel>
    <div class="login-con">
      <Card icon="log-in"   :bordered="false">
        <div style="text-align:center">
          <span style=" font-weight: 500;    margin-bottom: 25px;    font-family: fantay;color: #fff3f3;font-size: 23px"><h3>SmartKettle</h3></span>
          </div>
        <div class="form-con">
          <login-form ref="loginForm" @on-success-valid="handleSubmit" :loading="loading"></login-form>
          <p class="login-tip">输入用户名admin或superadmin,密码为1,即可登录</p>
        </div>
      </Card>
    </div>
    <div style="text-align: center;  position: absolute;  width: 100%;  margin: 0 auto; bottom: 0;  padding: 12px; color: #fff3f3;    font-size: 8px;    background: #ffffff4a;">
      <a target="_blank" style="color: #fff3f3 !important;" href="https://gitee.com/yaukie">
        © 2020-2021 规划、设计、开发、运维等版权归yuenbin所有</a>&nbsp;<br/>
      博客地址： <a target="_blank" style="color: #fff3f3 !important;"
               href="https://my.oschina.net/yaukie">
      https://my.oschina.net/yaukie</a>
    </div>
  </div>
</template>

<script>
import LoginForm from '_c/login-form'
import { mapActions, mapGetters } from 'vuex'
export default {
  components: {
    LoginForm
  },
  data () {
    return {
      value3: 0,
      loading: false,
      setting: {
        autoplay: true,
        autoplaySpeed: 2000,
        dots: 'inside',
        radiusDot: false,
        arrow: 'never'
      }
    }
  },
  methods: {
    ...mapGetters([
      'getToken'
    ]),
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    handleSubmit ({ userName, passWord ,verifyCode,uuid}) {
      const that = this
      that.loading = true
      that.handleLogin({ userName, passWord,verifyCode,uuid }).then(res => {
         if (that.getToken() != null ){
          this.$Message.success({
            closable: true,
            content: '登录成功',
            type: 'success'
          })
        }

        that.$router.push({
          name: that.$config.homeName
        })

         that.loading = false
      }).catch(err => {
        that.loading = false
        that.$refs.loginForm.fleshVerify()
        that.$Message.error(err.message)
      })
    },
  }
}
</script>

<style>

</style>
